<script setup>
import {reactive,ref,watch,computed} from 'vue'
const title = ref('')
const date = ref('')
let list = ref(JSON.parse(localStorage.getItem('list'))|| [])
// list = 
// console.log('数组',list);
const pid = ref('')

let currentIndex = ref(0)
// 提交数据
const submit=()=>{
  if(!title.value.trim || !date.value) return alert('请按照数据格式填写')
  
  if(pid.value){
    console.log('pid',pid.value,'执行了修改');
    list.value = list.value.map(item => {
    if(item.id === pid.value){
      item.title = title.value
      item.date = date.value
    }
    return item
  })
  }else{
    list.value.push({
    title:title.value,
    date:date.value,
    id:+new Date()
  })
  }
  
  title.value = ''
  date.value = ''
  pid.value=''
  console.log(list.value);
  // localStorage.setItem('list',JSON.stringify(list.value))
   }
  //  清空数据
const reset=(id)=>{
     title.value = ''
     date.value = ''
     pid.value=''
    }
// 编辑数据
const edit=(id)=>{
  const newList = list.value.filter(item => item.id ===id)
  title.value=newList[0].title
  date.value=newList[0].date
  // 修改数据的id
  pid.value = id
}
// 删除数据
const del=(id)=>{
  // 删除数据
  // 删除常量list中的数据

  list.value = list.value.filter(item => item.id !==id)
  // localStorage.setItem('list',JSON.stringify(list.value))
}
// 深度监听列表数据变化，如果变化就重新存储到本地
watch(list,(newList,oldList)=>{
  localStorage.setItem('list',JSON.stringify(newList))
},{deep:true})

// 滚动事件
const onScroll= (e)=>{
        const scrollTop = e.target.scrollTop
        currentIndex.value = Math.floor(scrollTop / 30)
        // console.log(currentIndex.value);
      }
// 计算属性，虚拟列表
const displayList = computed(()=>{
      return list.value.slice(currentIndex.value,currentIndex.value+10)
      
    })

// 实现拖拽效果
 const handleDragStart = (event,id) => {
  // console.log('开始拖拽的',id);
  // console.log(currentIndex.value);
  event.dataTransfer.setData('id', id)
 }
 const handleDragOver = (event) => {
  event.preventDefault()
 }
 const handleDrop = (event,id) => {
  event.preventDefault()
  const originIndex = parseInt(event.dataTransfer.getData("id"));
  console.log('开始id',originIndex);
  console.log('拖拽结束的id',id);
  // 交换数据
  // 拿到开始拖拽元素的索引
  const  startIndex = list.value.findIndex(item => item.id === originIndex)
  console.log('开始索引',startIndex);

  // 拿到结束拖拽元素的索引
  const  endIndex = list.value.findIndex(item => item.id === id)
  console.log('结束索引',endIndex);
  // 交换数据

  // 删除开始拖拽元素的数据
  const item = list.value.splice(startIndex,1)[0]
  // 把开始拖拽元素的数据插入到结束拖拽元素的索引位置
  list.value.splice(endIndex,0,item)
  // 重新渲染
  // localStorage.setItem('list',JSON.stringify(list.value))
 }
</script>
<template>
    <div id="app">
      <div class="content">
      <div>
              标题：<input type="text" placeholder="请输入代办标题" v-model="title" />
              日期：<input class="rili" type="date" placeholder="年/月/日" v-model="date" />
      </div>
      <br>
      <div>
          <button style="margin-right: 10px;" @click="submit">提交</button>
          <button @click="reset">清空</button>
      </div>
      <!-- 写一个表格，表头标题有：标题，日期，操作 -->
      <div class="table" >
        
          <table border="1" cellspacing="0" cellpadding="0">
           <tr style="display: flex; justify-content: flex-start;">
              <th style="padding: 0 10px; display: inline-block; width: 200px;">标题</th>
              <th style="padding: 0 10px; display: inline-block; width: 110px;">日期</th>
              <th style="padding: 0 10px; display: inline-block; width: 171px;">操作</th>
           </tr>
           <div class="container"  style="height:300px;overflow-y: auto;overflow-x: hidden;" @scroll="onScroll">
           <div class="scroll"  :style="{height:list.length*30+'px'}" >
            <div class="placeholder" :style="{height: currentIndex * 30 + 'px'}"></div>
           <tr v-for="item  in displayList" :key="item.id" style="height:30px"
           draggable="true" @dragstart="handleDragStart($event,item.id)"
           @dragover="handleDragOver($event)"
           @drop="handleDrop($event,item.id)"
           >
              <td style="padding: 0 10px; display: inline-block; width: 200px;">{{ item.title }}</td>
              <td style="padding: 0 10px; display: inline-block; width: 110px">{{ item.date }}</td>
              <td style="display: inline-block;width: 150px; padding: 0 10px;">
                  <button style="margin-right: 10px;" @click="edit(item.id)">编辑</button>
                  <button @click="del(item.id)">删除</button>
              </td>
           </tr>
          </div>
        </div>
         </table>
     
      </div>
      
      </div>
      
    </div>
</template>
<style scoped>
.content{
      width: 800px;
     
      text-align: center;
      margin: 0 auto;
  }
  .table{
      /* width: 400px; */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 100px;
  }
  .container::-webkit-scrollbar { width: 0 !important }
</style>